<template>
  <view class="home">
    <navbars
      title="云上农夫"
      urls="/pages/cart/index"
      types="switchTab"
      imgs="/static/cars.jpg"
    />
    <!-- 导航 end-->
    <view class="header">
      <view class="maps">
        <image class="logo" src="/static/maps.jpg"></image>
        <text>武汉</text>
        <h4>同城农场</h4>
      </view>
      <view class="sear">
        <ugo-search class="sss" :keyword="keyword" />
        <!-- <u-search
          placeholder="请搜索"
          v-model="keyword"
          shape="round"
          :clearabled="true"
          :show-action="false"
          bgColor="white"
          color="#BFBFBF"
        ></u-search> -->
      </view>
      <view class="tabs">
        <navigator
          url="/pages/mine/index"
          open-type="switchTab"
          v-for="(item, i) in listTab"
          :key="i"
          hover-class="none"
          @click="changeActive(i)"
          :class="{ active: activeIndex === i }"
        >
          <view>{{ item }}</view>
        </navigator>
      </view>
    </view>
    <!-- 是否为新人 -->
    <view
      class="cards"
      id="slide-box"
      :style="{ display: slideBoxHidden ? 'none' : 'block' }"
    >
      <navigator
        url="/pages/mine/coupon"
        open-type="navigate"
        hover-class="none"
      >
        <text class="tc">
          您还未拥有农地，平台赠送您一张<text class="xr">新人选地券</text>
          ，您可以在平台上选择自己心仪的农地使用哦
        </text>
      </navigator>
      <view class="ico">
        <u-icon name="close" @click="closes"></u-icon>
      </view>
    </view>
    <!-- 选择的农场 -->
    <navigator url="/pages/mine/myfarm" open-type="navigate" hover-class="none">
      <swiper
        :indicator-dots="swiperList.length > 0"
        class="swiper"
        v-if="swiperList.length > 0"
      >
        <swiper-item v-for="(item, i) in swiperList" :key="i">
          <view class="farms">
            <view class="farms-lf">
              <view class="nd">
                <text class="my">您的农地</text>
                <text class="dz">汉阳</text>
              </view>
              <image
                class="logo"
                src="https://img0.baidu.com/it/u=2195029939,188389738&fm=253&fmt=auto&app=138&f=JPEG?w=408&h=612"
                mode="scaleToFill"
              ></image>
            </view>
            <view class="farms-rg">
              <text
                ><text class="pir">期&emsp;&emsp;限:</text>10天/365天
                <span>可续费哦</span></text
              >
              <text><text class="pir">种植作物:</text>鱼塘 10㎡</text>
              <text><text class="pir">农事提醒:</text>喂养</text>
              <text
                ><text class="pir">垂钓次数:</text>2/10<span
                  >您还有垂钓次数没用完哦</span
                ></text
              >
            </view>
          </view>
        </swiper-item>
      </swiper>
    </navigator>

    <!-- 农场 -->
    <view class="text-area">
      <view class="texts" v-for="(item, i) in buyList" :key="i">
        <text class="tie">{{ item.title }}</text>
        <image
          class="logo"
          :src="item.img"
          mode="aspectFill"
          @click="gocaidi"
        ></image>
        <h4 class="name">{{ item.name }}</h4>
        <text class="span">{{ item.span }}</text>
        <view class="line">
          <text v-if="i <= 1" class="pir">¥{{ item.price }}</text>
          <view v-else class="sco">
            <u-icon name="star-fill" color="#EEA427" class="ico"></u-icon>
            <text class="scc">{{ item.score }}</text>
          </view>
          <view class="btn">
            <u-button
              color="#9a9390"
              type="primary"
              icon="plus"
              @click="adds(item)"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
    <!-- 获取位置 -->
    <view class="pop">
      <u-popup :show="show" mode="bottom" @close="close" @open="open">
        <view class="p-main">
          <view class="p-tle">
            <image
              class="logo1"
              src="/static/logo1.png"
              mode="scaleToFill"
            ></image>
            <view>云上农夫 申请</view>
          </view>
          <view class="wz">获取你的位置信息</view>
          <view class="dw">将获取你的位置信息，用于定位农庄</view>
          <view class="p-btn">
            <view class="btn btn1">
              <u-button color="#e8eae9" @click="close">拒绝</u-button>
            </view>
            <view class="btn">
              <u-button color="#05c160" @click="close">允许</u-button>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      title: "Hello",
      keyword: "亲子研学",
      listTab: ["所有农场", "度假农场", "农家乐农场", "餐厅农庄"],
      activeIndex: 0,
      buyList: [
        {
          id: 1,
          title: "特价团购",
          img: "https://p8.itc.cn/images01/20210401/286ee908f0b8421b87d45dedfd390a2f.jpeg",
          name: "大王农场",
          span: "采摘草莓",
          price: "25",
          score: 4.9,
        },
        {
          id: 2,
          title: "特价团购",
          img: "https://img0.baidu.com/it/u=2848028628,745776430&fm=253&fmt=auto&app=120&f=JPEG?w=820&h=546",
          name: "菜地",
          span: "采摘草莓",
          price: "25",
          score: 4.9,
        },
        {
          id: 3,
          title: "特价团购",
          img: "https://p8.itc.cn/images01/20210401/286ee908f0b8421b87d45dedfd390a2f.jpeg",
          name: "大王农场",
          span: "采摘草莓",
          price: "25",
          score: 4.9,
        },
        {
          id: 4,
          title: "特价团购",
          img: "https://p8.itc.cn/images01/20210401/286ee908f0b8421b87d45dedfd390a2f.jpeg",
          name: "大王农场",
          span: "采摘草莓",
          price: "25",
          score: 4.9,
        },
      ],
      swiperList: [],
      current: 0,
      slideBoxHidden: false, // 控制元素显示与隐藏的变量
      show: true,
    };
  },
  onLoad() {},
  methods: {
    gocaidi() {
      uni.navigateTo({
        url: "/packageB/productdetails/Vegetableplotdetails",
      });
    },
    changeActive(i) {
      this.activeIndex = i;
    },
    closes() {
      // 使用uni-app提供的选择器API获取元素
      const query = uni.createSelectorQuery();
      // 选择id为slide-box的元素
      query
        .select("#slide-box")
        .boundingClientRect((data) => {
          // 获取元素信息成功后执行的回调函数
          if (data) {
            // 隐藏元素
            this.slideBoxHidden = true;
          }
        })
        .exec();
    },
    adds(i) {
      this.swiperList.push(i);
      console.log(this.swiperList, " this.swiperList");
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.home {
  background-color: #f9f9f9;
  font-family: "Poppins";
  position: absolute;
  width: 100%;
  height: 100%;
  .header {
    .maps {
      display: flex;
      align-items: center;
      margin-left: 5%;

      .logo {
        width: 30rpx;
        height: 30rpx;
      }

      text {
        margin: 0 10rpx;
        font-size: 24rpx;
      }

      h4 {
        font-size: 40rpx;
        font-weight: 500;
      }
    }

    .sear {
      width: 95%;
      margin: 10rpx auto;
    }

    .tabs {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 20rpx;

      navigator {
        background-color: #fff;
        border-radius: 50rpx;
        padding: 10rpx 20rpx;
        font-size: 26rpx;

        &.active {
          background-color: #9a9390;
          color: white;
        }
      }
    }
  }

  .cards {
    position: relative;
    background-color: #fff;
    margin-top: 20rpx;
    padding: 20rpx 60rpx;
    font-size: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    .ico {
      position: absolute;
      right: 5%;
      top: 10rpx;
    }

    .tc {
      .xr {
        color: #f9b246;
      }
    }
  }

  .text-area {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #f9f9f9;
    .texts {
      background-color: #fff;
      width: 40%;
      margin: 20rpx;
      border-radius: 20rpx;
      padding: 10rpx;

      &:first-of-type .tie::after {
        content: "火爆进行中";
        color: red;
        margin-left: 5%;
      }

      .tie {
        margin-left: 5%;
        font-size: 30rpx;
      }

      .span {
        margin-left: 5%;
        color: #bbbbbb;
        font-size: 28rpx;
      }

      .logo {
        width: 95%;
        height: 180rpx;
        border-radius: 20rpx;
      }

      .name {
        font-weight: normal;
        margin-left: 5%;
      }

      .line {
        margin-top: 20rpx;
        margin-left: 5%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .pir {
          color: #f91414;
          font-size: 28rpx;
        }

        .sco {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .scc {
            margin-left: 20%;
            color: #bbbbbb;
            font-size: 24rpx;
          }
        }

        .btn {
          margin-right: 5%;
          border-radius: 15rpx;
        }

        ::v-deep .u-button--square {
          width: 50rpx !important;
          height: 50rpx !important;
          border-radius: 20rpx !important;
        }

        .btn ::v-deep .u-icon__icon {
          font-size: 30rpx !important;
        }
      }
    }
  }

  .farms {
    display: flex;
    // justify-content: space-around;
    align-items: center;
    position: relative;

    &::before {
      position: absolute;
      top: -10%;
      left: 0;
      content: "";
      width: 100rpx;
      height: 100rpx;
      background: url("/static/wd.png") no-repeat;
      background-size: cover;
    }

    .farms-lf {
      margin-left: 3%;

      .logo {
        width: 200rpx;
        height: 140rpx;
        border-radius: 10rpx;
      }

      .nd {
        margin-left: 5%;
        font-size: 30rpx;

        .my {
          z-index: 99;
          position: relative;
        }

        .dz {
          margin-left: 5%;
          font-size: 20rpx;
        }
      }
    }

    .farms-rg {
      margin-left: 5%;
      display: flex;
      flex-direction: column;

      text {
        margin: 10rpx 0;
        font-size: 30rpx;

        span {
          color: #bbbbbb;
          font-size: 20rpx;
          margin-left: 20rpx;
        }

        .pir {
          margin-right: 20rpx;
        }
      }
    }
  }

  .p-main {
    padding: 20rpx;
    .p-tle {
      display: flex;
      align-items: center;
      .logo1 {
        width: 80rpx;
        height: 80rpx;
      }
    }
    .wz {
      font-size: 44rpx;
    }
    .dw {
      color: #bbbbbb;
      font-size: 28rpx;
      margin: 10rpx 0;
    }
    .p-btn {
      display: flex;
      justify-content: center;
      .btn {
        width: 20%;
        margin: 20rpx;
        ::v-deep .u-button {
          border-radius: 25rpx;
        }
      }
      .btn1 ::v-deep .u-button {
        color: #000 !important;
      }
    }
  }
}

.swiper {
  // height: 220rpx;
  background-color: #fff;

  ::v-deep .uni-swiper-dot {
    background: #e7e7e7;

    &.uni-swiper-dot-active {
      width: 50rpx;
      border-radius: 10rpx;
      background: #b1b1b1;
    }
  }
}
</style>